<template>
  <nav class="nav border">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide"
             v-for="(slide, index) of slides"
             :key="index"
        >
          <div class="mySwiperWrap">
            <div class="swiper__box"
                 v-for="item of slide"
                 :key="item.id"
            >
              <img class="swiper__img" :src="item.imgUrl" alt="">
              <p>{{item.itemName}}</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
    </div>
  </nav>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
export default {
  name: 'IndexSwiper',
  props: {
    list: Array
  },
  computed: {
    slides () {
      const list = this.list
      const len = list.length
      let pagesNum = Math.ceil(len / 8)
      let arr = []
      for (let j = 1; j < pagesNum + 1; j++) {
        let obj = []
        let min = Math.min(8 * j, len)
        for (let i = 8 * (j - 1); i < min; i++) {
          obj.push(list[i])
        }
        arr.push(obj)
      }
      return arr
    }
  },
  mounted () {
    /* eslint-disable */
    new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
        type: 'bullets'
      },
      observer: true,
      observeParents: true,
    })
  }
}
</script>

<style lang="scss" scoped>
  @import '~@/assets/style/common';
  .nav {
    overflow: hidden;
    height: 0;
    width: 100%;
    padding-bottom: 492px;
    border-color: #e5e5e5;
    background-color: #fff;
  }
  .swiper-wrapper {
    box-sizing: border-box;
    height: 492px;
    padding: 112px 0 40px 0;
  }
  .mySwiperWrap {
    overflow: hidden;
    height: 100%;
    font-size: 20px;
    text-align: center;
  }
  .swiper__box {
    float: left;
    width: 25%;
    padding: 20px 0;
  }
  .swiper__img {
    width: 84px;
    height: 84px;
    margin-bottom: 18px;
  }
  .swiper__img + p {
    font-size: 30px;/*px*/
    @include omit;
  }
  .swiper-pagination {
    width: 100%;
    left: 0;
    bottom: 30px;
  }
</style>
